<script lang="ts" setup>
  import Header from '@/components/layout/Header.vue'
  import { onMounted, ref, watch } from 'vue'
  import SubFloatButton from './SubFloatButton.vue'
  import { findSubCategoryReq } from '@/api'
  import { useRouter } from 'vue-router'

  const props = defineProps<{
    id: string
    name: string
  }>()

  const router = useRouter()

  // 一级分类
  const levelList1 = ref<any[]>([])
  // 二级分类
  const levelList2 = ref<any[]>([])

  const getTableData = async (level: string) => {
    const res = await findSubCategoryReq({ level, parentCatId: props.id })
    if (res?.data) {
      if (level === '0') {
        levelList1.value = res.data
      } else {
        levelList2.value = res.data
      }
    }
  }

  // 获取菜单列表
  const getMenuList = () => {
    if (levelList1.value?.length > 0) {
      const list1 = JSON.parse(JSON.stringify(levelList1.value))
      menuList.value = list1.map((item: any) => {
        if (levelList2.value?.length > 0) {
          const children = levelList2.value.filter(
            (child: any) => child.parentId === item.id
          )
          if (children?.length > 0) {
            item.children = children.map((child: any) => {
              return {
                key: child.id,
                title: child.title,
              }
            })
          }
        }
        return {
          key: item.id,
          title: item.title,
          children: item.children,
        }
      })
    }
  }

  const refreshCategoryData = async () => {
    await getTableData('0')
    await getTableData('1')
    getMenuList()
  }

  const articleProps = ref({
    selectedTitle: '',
    selectedId: '',
    parentTitle: '',
  })

  const refreshArticleProps = () => {
    articleProps.value.selectedTitle = ''
    articleProps.value.selectedId = ''
    articleProps.value.parentTitle = ''
  }

  const openKeys = ref<string[]>([])

  const handleMenuClick = (parKey: number, key: string) => {
    const parent = levelList1.value.find((item) => item.id === parKey)
    const child = levelList2.value.find((item) => item.id === key)
    articleProps.value.parentTitle = parent?.title
    articleProps.value.selectedTitle = child?.title
    articleProps.value.selectedId = child?.id
    if (router.currentRoute.value.name !== 'Article') {
      router.push({
        name: 'Article',
        query: {
          id: props.id,
          name: props.name,
        },
      })
    } else {
      // 重新加载Article路由
      // refreshArticleProps()
    }
  }

  watch(
    () => openKeys,
    (val) => {
      console.log('openKeys', val)
    }
  )

  const menuList = ref<any[]>([])

  onMounted(() => {
    refreshCategoryData()
  })
</script>

<template>
  <a-space
    direction="vertical"
    :style="{ width: '100%' }"
  >
    <a-layout>
      <a-layout-header class="header">
        <Header />
      </a-layout-header>
      <a-layout-content class="content">
        <div class="content-menu">
          <a-menu
            id="content-menu-id"
            style="width: 256px"
            v-model:openKeys="openKeys"
            mode="inline"
          >
            <a-sub-menu
              v-for="item in menuList"
              :key="item.key"
            >
              <template #title>
                <span class="titleSpan"></span>{{ item.title }}
              </template>
              <a-menu-item
                :v-if="item.children"
                v-for="child in item.children"
                :key="child.key"
                @click="handleMenuClick(item.key, child.key)"
                >{{ child.title }}
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
        <div class="content-main">
          <router-view v-slot="{ Component, route }">
            <component
              :is="Component"
              v-bind="
                route.name === 'Article'
                  ? { articleProps, refreshArticleProps }
                  : {
                      levelList1,
                      levelList2,
                      refreshCategoryData,
                    }
              "
            />
          </router-view>
        </div>
      </a-layout-content>
      <SubFloatButton
        :id="id"
        :name="name"
      />
    </a-layout>
  </a-space>
</template>

<style lang="less" scoped>
  .header {
    background: var(--color-primary);
    padding: 0 20px;
    line-height: 64px;
    color: white;
    font-size: 18px;
  }

  .content {
    background: rgb(255, 255, 255);
    min-height: calc(100vh - 64px);
    font-size: 16px;
    display: flex;
    .content-menu {
      width: 256px;
      background: #f0f0f0;
    }
    .content-main {
      flex: 1;
      padding: 0 20px;
    }

    .titleSpan {
      width: 4px;
      height: 12px;
      background-color: var(--color-blue);
      display: inline-block;
      margin-right: 8px;
      position: relative;
      top: 1px;
    }
  }
</style>
